<template>
  <div class="drug">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="饮片" name="1">
        <Form1></Form1>
      </el-collapse-item>
      <el-collapse-item title="颗粒" name="2">
        <Form2></Form2>
      </el-collapse-item>
      <el-collapse-item title="中成药" name="3">
        <Form3></Form3>
      </el-collapse-item>
      <el-collapse-item title="西药" name="4">
        <Form4></Form4>
      </el-collapse-item>
      <el-collapse-item title="保健品" name="5">
        <Form5></Form5>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
  import Form1 from './form1/index.vue'
  import Form2 from './form2.vue'
  import Form3 from './form3.vue'
  import Form4 from './form4.vue'
  import Form5 from './form5.vue'
  import {
    ref
  } from 'vue'

  const activeNames = ref(['1'])
  const handleChange = (val) => {
    console.log(val)
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-collapse-item__header {
    background: #f6faff !important;
    padding: 0px 15px;
    color: #373737;
  }

  ::v-deep .el-collapse-item__content {
    padding: 20px 40px;
  }
</style>